<template>
  <div class="app-container index">
    <el-row :gutter="20">
      <el-col :span="24">
        <Card title="排查统计" style="margin-bottom: 20px">
          <template #subTitle>
            <el-date-picker
              v-model="tjDate"
              type="daterange"
              range-separator="To"
              start-placeholder="Start date"
              end-placeholder="End date"
              size="mini"
            />
          </template>
          <template #default>
            <el-row>
              <el-col :span="24">
                <Bar2Vue ref="pcrwtj"></Bar2Vue>
              </el-col>
            </el-row>
          </template>
        </Card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Card from "./components/Card.vue";
import BarVue from "./components/Bar.vue";
import Bar2Vue from "./components/Bar2.vue";

import { deptTreeSelect } from "@/api/system/user";
import { apis as APIS } from "@/api/hdwarning/immediate.js";

const tasks = ref();
const thzg = ref();
const queryParams = ref({});

const initData = () => {
  queryBarData(queryParams.value).then((res) => {
    const { hidden, task } = res.data;
    tasks.value.setData(
      task.map((item) => ({
        value: item.count,
        name: item.task_state,
      }))
    );
    thzg.value.setData(
      hidden.map((item) => ({
        value: item.count,
        name: item.hidden_progress,
      }))
    );
  });
};

const pcrwtj = ref();
const tjDate = ref([]);
const initData2 = () => {
  APIS.getTjData({
    startTime: tjDate[0] || null,
    endTime: [1] || null,
  }).then((res) => {
    console.log(res);
    // pcrwtj.value.setData({
    //   data: res.data.map((item) => item.count),
    //   yAxis: res.data.map((item) => item.name),
    //   title: "排查任务",
    // });
  });
};
onMounted(() => {
  initData2();
});

const treeData = ref([]);
onMounted(() => {
  deptTreeSelect().then((response) => {
    treeData.value = response.data;
  });
});
const tempType = ref(0);
</script>

<style lang="scss" scoped>
.index {
  // padding: 20px;
  width: 100%;
  // min-height: calc(100vh);
  background-color: #e6ecf1;
}
.mt20 {
  margin-top: 20px;
}
</style>
